<template>
  <div class="content">
    <h2>密码登录</h2>
    <div class="intbox">
      <input type="text" placeholder="手机/用户名" v-model="info.phone" />
      <input type="password" placeholder="密码" v-model="info.pass" />
      <button @click="btnClick()">登录</button>
    </div>
    <div class="text_info">
      <span @click="zhuce()">去注册</span>
      <span>忘记密码</span>
    </div>
    <div class="infot">
      <input type="checkbox" />
      <p>已阅读并同意<span>《用户服务协议》、《隐私政策》</span></p>
    </div>
  </div>
</template>

<script setup>
// import { nextTick } from "vue";
import { user_login } from "../api/index"
import {onMounted,ref} from 'vue'
import {useRouter,useRoute} from 'vue-router'
var $route = useRoute()
var $router = useRouter()
var userlist = ref([])
var info =ref( { phone: "", pass: "" },)
var btnClick=()=>{
   user_login({ phone: info.value.phone, pass: info.value.pass }).then(
        (res) => {
          if (res.data.code == 200) {
            alert("登录成功");
            $router.push('/index/home')
            window.localStorage.setItem('token',res.data.token)
            console.log(res.data);
            window.localStorage.setItem('id',res.data.userinfo.id)
            var userinfo = JSON.stringify(res.data.userinfo)
            window.localStorage.setItem('userinfo',userinfo)
          
          } else {
            alert("登录账号或密码错误！");
          }
        }
      );
}

var zhuce=()=> {
     $router.push({ path: "/zhuce" });
    }
</script>

<style scoped>
.content {
  margin: 10vh auto;
  height: 80vh;
  width: 90vw;
  box-sizing: border-box;
  position: relative;
}
.content h2 {
  padding: 4vh 2vw;
}
.content .intbox {
  margin: 0 auto;
  height: 30vh;
  width: 90vw;
  text-align: center;
}
.content .text_info {
  height: 5vh;
  width: 90vw;
  display: flex;
  font-size: 18px;
  justify-content: space-between;
}
.content .text_info span {
  color: rgb(0, 183, 255);
}
.content .intbox input {
  box-sizing: border-box;
  width: 86vw;
  height: 6vh;
  line-height: 6vh;
  padding-left: 2vw;
  margin-top: 2vh;
  margin-bottom: 2vh;
  font-size: 18px;
  border: transparent;
  outline: none;
  background: transparent;
  border-bottom: 1px solid rgb(226, 226, 226);
}
.content .intbox button {
  width: 86vw;
  height: 6vh;
  margin-top: 2vh;
  line-height: 6vh;
  border-radius: 25px;
  background: gainsboro;
  border: transparent;
  font-size: 18px;
}
.content .infot {
  height: 4vh;
  line-height: 4vh;
  display: flex;
  align-items: center;
  position: absolute;
  bottom: 0;
}
.content .infot input {
  height: 4vh;
  margin-right: 1vw;
  line-height: 4vh;
}
.content .infot p {
  height: 4vh;
  font-size: 14px;
  align-self: center;
}
.content .infot span {
  height: 4vh;
  font-size: 14px;
  color: rgb(0, 199, 243);
}
</style>